<template>
    <el-container>
        <!-- 左侧区域 -->
        <el-aside :width="asideWidth">
            <div class="g-title">
                <!-- <el-image :src="url"></el-image> -->
                <h3 v-show="isCollapse">餐饮后台管理系统</h3>
            </div>
            <p><router-link to="/index">首页</router-link></p>
            <Menu :isCollapse="isCollapse"></Menu>
        </el-aside>
        <!-- 右侧区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div class="breadDiv">
                    <el-icon size="25" @click="bindCollapse">
                        <!-- <Fold v-if="isCollapse" @click="bindCollapse" /> 
                        <Expand v-else @click="bindCollapse"/>  -->
                        <component :is="componentName"></component>
                    </el-icon>
                    <span><BreadCrumb></BreadCrumb></span>
                </div>
                <div>
                    <el-dropdown>
                        <div class="g-header-r">
                            <!-- 可选链运算 ?. 先判断前面的对象是否为真，如果为真执行点语法-->
                            <el-icon
                                style="
                                    font-size: 20px;
                                    width: 1em;
                                    height: 1em;
                                    margin-right: 8px;
                                    margin-top: 8px;
                                    color: white;
                                    font-weight: 900;
                                    cursor: pointer;
                                "
                                @click="toLogList"
                                >
                                <Bell
                            /></el-icon>
                            <!-- <el-icon style="font-size: 20px;width: 1em; height: 1em; margin-right: 8px;margin-top: 8px"><BellFilled /></el-icon> -->
                            <p>欢迎您:{{ userInfo?.nick }}</p>
                            <el-image
                                :src="userInfo.img_url?'http://localhost:3000/test/pic?img='+userInfo.img_url:durl"
                            ></el-image>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>切换用户</el-dropdown-item>
                                <el-dropdown-item @click="bindExit"
                                    >退出登录</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 内容区域 -->
            <el-main>
                <!-- 面包屑导航 -->
                <!-- <BreadCrumb></BreadCrumb> -->
                <!-- 子路由输出 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Menu from '@/components/Menu.vue'
import BreadCrumb from '@/components/BreadCrumb.vue'
import { Fold, Expand, Bell, BellFilled } from '@element-plus/icons-vue'
import { useAccountStore } from '@/stores/user'
export default {
    components: {
        BreadCrumb,
        Menu,
        Fold,
        Expand,
        Bell,
        BellFilled,
    },
    data() {
        return {
            url: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
            isCollapse: true,
            asideWidth: '200px',
            componentName: Fold,
            durl: 'https://img2.baidu.com/it/u=3739570799,2399418824&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676998800&t=4a58f0a7525a0ce667be79c588d3c334',
        }
    },
    computed: {
        userInfo() {
            const accountStore = useAccountStore()
            return accountStore.account
        },
    },
    methods: {
        bindCollapse() {
            this.isCollapse = !this.isCollapse
            this.asideWidth = this.isCollapse ? '200px' : '70px'
            this.componentName = this.isCollapse ? Fold : Expand
        },
        bindExit() {
            localStorage.removeItem('TOKEN') //退出登录，清除token
            this.$router.replace({ path: '/login' })
        },
        toLogList(){
            this.$router.replace({ path: '/log/list' })
        }
    },
}
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-border-radius: 80px;
}

::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb:vertical {
    background: rgba(0, 0, 0, 0.61);
    -webkit-border-radius: 80px;
}

::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(0, 0, 0, 0.61);
    -webkit-border-radius: 80px;
}
.el-container {
    width: 100%;
    height: 100vh;

    .el-aside {
        background-color: #2d3436;
        color: white;
        transition: 0.5s;
        .g-title {
            display: flex;
            margin: 20px;
            h3 {
                margin-left: 5px;
                font-weight: normal;
            }
        }
        .el-image {
            width: 25px;
            height: 25px;
        }
        p {
            margin-left: 20px;
        }
        .el-menu {
            border-right: 0;
        }
    }
    .el-container {
        .el-aside {
            // color: var(--el-text-color-primary);
            // background: var(--el-color-primary-light-8);
            // overflow-x: hidden;
            // min-width: 200px;
        }
        .el-header {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #7f8fa6;
            height: 60px;
            .breadDiv {
                display: flex;
                align-items: center;
                .el-icon {
                    padding-right: 20px;
                }
                span {
                    margin-top: 10px;
                }
            }
            .g-header-r {
                display: flex;
                p {
                    color: white;
                    padding-top: 10px;
                    margin-right: 5px;
                }
                .el-image {
                    width: 30px;
                    height: 30px;
                }
            }
        }
        .el-breadcrumb {
            margin-bottom: 10px;
        }
    }
}
</style>
